<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/browser.js" charset="utf-8"></script>
    <script src="js/react.js" charset="utf-8"></script>
    <script src="js/react-dom.js" charset="utf-8"></script>
  </head>
  <body>
    <div id="div1"></div>
  </body>
  <script type="text/babel">
  class Sbtn extends React.Component{
    constructor(...args){
      super(...args);
      this.state={
        scount:0
      };
    }

    fn(){
      this.props.addP();
    }
    addS(){
      this.setState({
        count:this.state.scount++
      })
    }
    render(){
      return <div>
        <button type="button" onClick={this.fn.bind(this)}>子改变父</button>
        子值:{this.state.scount}
      </div>;
    }
  }

  class Pbtn extends React.Component{
    constructor(...args){
      super(...args);
      this.state={
        pcount:0
      };
    }
    click(){
      this.refs.sdom.addS()
    }
    
   addP(){
      this.setState({
        count:this.state.pcount++
      })
    }
    
    render(){
      return <div>
        <button type="button" onClick={this.click.bind(this)}>父改变子</button>
        父值:{this.state.pcount}
        <Sbtn ref="sdom" addP={this.addP.bind(this)}></Sbtn>
      </div>;
    }
  }

  let oDiv=document.getElementById('div1');

  ReactDOM.render(<Pbtn/>, oDiv);
  </script>
</html>
